<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Single Selection Buttons</title>
    <style>
        /* 定义按钮的默认样式 */
        .button {
            padding: 10px 20px;
            margin: 5px;
            font-size: 16px;
            cursor: pointer;
            border: none;
            border-radius: 5px;
            transition: background-color 0.3s;
        }

        /* 定义按钮被选中时的样式 */
        .button.selected {
            background-color: #4CAF50; /* 绿色背景 */
            color: white; /* 白色文字 */
        }

        /* 定义按钮未被选中时的样式（可选，因为默认样式已经足够） */
        .button:not(.selected) {
            background-color: #f1f1f1; /* 灰色背景 */
            color: black; /* 黑色文字 */
        }
    </style>
</head>
<body>
    <!-- 创建5个按钮 -->
    <button class="button" onclick="selectButton(this)">选项 1</button>
    <button class="button" onclick="selectButton(this)">选项 2</button>
    <button class="button" onclick="selectButton(this)">选项 3</button>
    <button class="button" onclick="selectButton(this)">选项 4</button>
    <button class="button" onclick="selectButton(this)">选项 5</button>

    <script>
        // 定义选择按钮的函数
        function selectButton(button) {
            // 获取所有按钮元素
            const buttons = document.querySelectorAll('.button');

            // 移除所有按钮的选中样式
            buttons.forEach(btn => {
                btn.classList.remove('selected');
            });

            // 为当前点击的按钮添加选中样式
            button.classList.add('selected');
        }
    </script>
</body>
</html>